<template>
    <el-dialog :title="title" :visible.sync="visible" width="700px" @close="close">
        <div class="flex-xy-center">
            <el-form :model="formData" ref="formData" :rules="rules" label-width="150px" label-position="right"
                     :inline="false"
                     size="normal">
                <el-row :gutter="20">
                    <el-col :span="24" :offset="0">
                        <el-form-item label="账号:" prop="account">
                            <el-input style="width: 80%" class="editStyle" v-model="formData.account"
                                      placeholder="请输入账号"
                                      maxlength="30"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" :offset="0">
                        <el-form-item label="密码:" prop="password">
                            <el-input style="width: 80%" class="editStyle password-input" v-model="formData.password"
                                      placeholder="请输入密码" type="text" onkeyup="value=value.replace(/[\u4E00-\u9FA5]/g,'')"
                                      maxlength="30">
                                <i slot="suffix" class="el-icon-view" @click="hiddenPwd"></i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row :gutter="20">
                    <el-col :span="24" :offset="0">
                        <el-form-item label="所属平台:" prop="platform">

                            <el-select filterable v-model="formData.platform" clearable style="width: 80%">
                                <template v-for="dict in dict.type.illegal_platform">
                                    <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                                </template>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
<!--                    <el-col :span="24" :offset="0">-->
<!--                        <el-form-item label="关联车辆所属公司:" prop="deptId">-->

<!--                            <el-select filterable @change="propertyChange" v-model="formData.deptId" clearable style="width: 80%">-->
<!--                                <template v-for="(item, index) in companyOriginList">-->
<!--                                    <el-option :label="item.deptName" :value="item.deptId" :key="index"></el-option>-->
<!--                                </template>-->
<!--                            </el-select>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->

                    <el-col :span="24">
                        <el-form-item label="地区:" prop="addrCode">

                            <el-select filterable @change="areaChange" v-model="formData.addrCode" clearable style="width: 80%">
                                <template v-for="(item, index) in areaList">
                                    <el-option :label="item.name" :value="item.code" :key="index"></el-option>
                                </template>
                            </el-select>

<!--                            <RegionCityLink v-model="formData.citydata" disabled :key="carKey"-->
<!--                                            placeholder="请选择城市" ref="citySelect"-->
<!--                                            :showAllLevels="false"></RegionCityLink>-->
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="24" :offset="0">

                        <el-form-item label="启用/禁用:" prop="enableFlag">
                            <el-radio-group v-model="formData.enableFlag">
                                <template v-for="dict in dict.type.illegal_platform_enable">
                                    <el-radio :label="dict.value">{{ dict.label }}</el-radio>
                                </template>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="24" :offset="0">
                        <el-form-item label="是否需要U盾:" prop="shieldFlag">
                            <el-switch
                                v-model="formData.shieldFlag" active-value="1" inactive-value="0">
                            </el-switch>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="24" :offset="0">
                        <el-form-item label="账号性质:" prop="accountNature">
                            <el-select filterable v-model="formData.accountNature" clearable style="width: 80%">
                                <template v-for="dict in dict.type.account_nature">
                                    <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                                </template>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="24" :offset="0">
                        <el-form-item label="备注:" prop="remark">
                            <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" style="width: 80%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>

        </div>
        <span slot="footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="confim">确定</el-button>
    </span>
    </el-dialog>
</template>
<script>
import * as illegalApi from '@/api/illegalManage/illegalList';
import {listDept} from "@/api/system/dept";
import RegionCityLink from "@/views/components/provinceCity/regionCityLink.vue";
import {carsurvieladdr, workOrderAccountSave} from "@/api/illegalManage/illegalList";

export default {
    components: {RegionCityLink},
    dicts: ['illegal_platform', 'illegal_platform_enable', 'account_nature'],
    data() {
        return {
            carKey: 0,
            companyOriginList: [],
            areaList: [],
            type: 0,
            illegalQueryAccountId: '',
            title: '新增账号',
            visible: false,
            addressList: [],
            formData: {
                account: '',
                password: '',
                platform: '1',
                addrCode: '',
                enableFlag: '1',
                shieldFlag: 0,
                accountNature: null,
                remark: null
            },
            rules: {
                account: [
                    {required: true, message: '请输入账号', trigger: 'change'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'change'}
                ],
                platform: [
                    {required: true, message: '请选择所属平台', trigger: 'change'}
                ],
                deptId: [
                    {required: true, message: '请选择关联车辆所属公司', trigger: 'change'}
                ],
                addrCode: [
                    {required: true, message: '请选择地区', trigger: 'change'}
                ],
                accountNature: [
                    {required: true, message: '请选择账号性质', trigger: 'change'}
                ]
            },
            showPwd:false,
        }
    },
    created() {
        this.getCompanyList();
        this.getIllegalAcountAddressList();
    },
    methods: {
        // 控制密码的显示与隐藏
        hiddenPwd() {
            this.showPwd = !this.showPwd // 默认为false
            if (this.showPwd) {
                document.getElementsByClassName('password-input')[0].style.webkitTextSecurity = 'none'
            } else {
                document.getElementsByClassName('password-input')[0].style.webkitTextSecurity = 'disc'
            }
        },
        propertyChange(val) {
            let find = this.companyOriginList.find(item => val == item.deptId);
            if (find) {
                this.formData.deptName = find.deptName ?? null
                // //下标0为一级菜单value
                // this.formData.citydata[0] = String(find.areaId);
                // //下标1为二级菜单value
                // this.formData.citydata[1] = String(find.regionId && find.regionId.split("/")[0]);
                // this.formData.citydata[2] = String(find.regionId && find.regionId.split("/")[1]);
                //
                // this.formData.addrCode = this.formData.citydata[2]
                // this.carKey++
            }else {
                this.formData.deptName = null
                // this.formData.citydata = [];
                // this.formData.addrCode = null;
                // this.carKey++
            }
            this.$forceUpdate()
        },

        areaChange(val){
            this.formData.addrName = this.areaList.find(item => val == item.code)?.name??null
        },

        //获取所属公司列表
        getCompanyList() {
            listDept(
                {
                    deptType: '2',//组织类型（1组织 2公司）
                    regionId: null,//所在城市（省市区id）
                }).then(res => {
                this.companyOriginList = res.data
            })

            illegalApi.carsurvieladdr().then(res => {
                this.areaList = res.data
            })

        },
        // 违章查询地区编码集合
        getIllegalAcountAddressList() {
            // illegalApi.illegalAcountAddressList().then(res => {
            //     this.addressList = res.data;
            // })
        },
        // 确定按钮
        confim() {
            this.$refs.formData.validate((valid) => {
                if (valid) {

                    if (this.type == 1) {//编辑
                        this.$confirm('确认修改违章查询账号吗?', '提示', {
                            confirmButtonText: '确认',
                            cancelButtonText: '取消',
                        }).then(() => {
                            illegalApi.upDateIllegalAcount(this.formData).then(res => {
                                if (res.code == 200) {
                                    this.close();
                                    this.$emit('success');
                                    this.$message({
                                        type: 'success',
                                        message: '修改成功'
                                    });
                                }
                            })
                        })
                    } else {//新增
                        this.$confirm('确认添加违章查询账号吗?', '提示', {
                            confirmButtonText: '确认',
                            cancelButtonText: '取消',
                        }).then(() => {
                            illegalApi.workOrderAccountSave(this.formData).then(res => {
                                if (res.code == 200) {
                                    this.close();
                                    this.$emit('success');
                                    this.$message({
                                        type: 'success',
                                        message: '添加成功'
                                    });
                                }
                            })
                        })
                    }

                }
            });
        },
        /**
         * 显示弹框
         * @param {0:新增 1:编辑} type
         * @param {编辑回显的账号id} illegalQueryAccountId
         */
        show(type, illegalQueryAccountId) {
            this.type = type;
            // 延时处理重置数据,防止数据污染
            this.$nextTick(() => {
                this.$refs.formData && this.$refs.formData.resetFields();
            })
            if (type == 1) {//编辑
                this.title = '编辑账号';
                this.illegalQueryAccountId = illegalQueryAccountId;
                // 获取回显数据
                illegalApi.illegalAcountDetail(illegalQueryAccountId).then(res => {
                    this.formData = res.data;
                })
            }
            this.visible = true;

        },
        close() {
            this.carKey=0,
            this.type=0,
            this.illegalQueryAccountId = ''
            this.formData ={
                account: '',
                password: '',
                platform: '1',
                addrCode: '',
                enableFlag: '1',
                shieldFlag: 0,
                accountNature: null,
                remark: null
            }
            this.showPwd = false;
            if (this.showPwd) {
                document.getElementsByClassName('password-input')[0].style.webkitTextSecurity = 'none'
            } else {
                document.getElementsByClassName('password-input')[0].style.webkitTextSecurity = 'disc'
            }
            this.visible = false;
        }
    },
}
</script>
<style lang="scss" scoped>
.editStyle {
    width: 200px;
}
.password-input {
    position: relative;
    font-size: 14px; /* 调整字体大小以适配隐藏文本 */
    color: transparent; /* 将文本颜色设为透明 */
    letter-spacing: 0.25em; /* 调整字符间距以隐藏文本 */
    -webkit-text-security: disc; /* 将输入内容显示为圆点，适用于部分浏览器 */
}

::v-deep .password-input .el-input__suffix {
    right: 7px;
    -webkit-text-security: none !important;
}
</style>
